<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>青南学长 - 找到最适合您的学习伙伴</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 原有的CSS样式保持不变 */
        :root {
            --primary: #6ab1f7;
            --primary-light: #a8d0fe;
            --secondary: #4a8bc9;
            --accent: #8ec5fc;
            --text: #2c3e50;
            --text-light: #6c757d;
            --background: #f0f8ff;
            --white: #ffffff;
            --card-shadow: 0 8px 20px rgba(106, 177, 247, 0.15);
            --hover-shadow: 0 12px 30px rgba(106, 177, 247, 0.25);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: var(--background);
            color: var(--text);
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* 导航栏样式 */
        header {
            background-color: var(--white);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
        }
        
        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .logo-icon {
            color: var(--primary);
            font-size: 28px;
        }
        
        .logo-text {
            font-size: 24px;
            font-weight: 700;
            color: var(--primary);
            letter-spacing: -0.5px;
        }
        
        .user-menu {
            position: relative;
        }
        
        .user-avatar {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.3s;
        }
        
        .user-avatar:hover {
            border-color: var(--primary);
        }
        
        .dropdown-menu {
            position: absolute;
            top: 55px;
            right: 0;
            background: var(--white);
            width: 180px;
            border-radius: 10px;
            box-shadow: var(--card-shadow);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.3s;
            z-index: 10;
            padding: 10px 0;
        }
        
        .dropdown-menu.active {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        
        .dropdown-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 20px;
            color: var(--text);
            text-decoration: none;
            transition: background 0.2s;
        }
        
        .dropdown-item:hover {
            background: rgba(106, 177, 247, 0.08);
        }
        
        .dropdown-divider {
            height: 1px;
            background: #eee;
            margin: 5px 0;
        }
        
        /* 页面标题区域 */
        .hero-section {
            text-align: center;
            padding: 60px 0 40px;
        }
        
        h1 {
            font-size: 2.8rem;
            color: var(--primary);
            margin-bottom: 15px;
            font-weight: 700;
        }
        
        .subtitle {
            font-size: 1.2rem;
            color: var(--text-light);
            max-width: 600px;
            margin: 0 auto 30px;
        }
        
        /* 筛选栏样式 */
        .filter-section {
            background-color: var(--white);
            border-radius: 16px;
            padding: 25px;
            box-shadow: var(--card-shadow);
            margin-bottom: 40px;
            border: 1px solid var(--primary-light);
        }
        
        .filter-title {
            font-size: 1.3rem;
            margin-bottom: 20px;
            color: var(--primary);
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .filter-title i {
            color: var(--primary-light);
        }
        
        .filter-form {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
        }
        
        .filter-group {
            display: flex;
            flex-direction: column;
        }
        
        label {
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--text);
            font-size: 0.95rem;
        }
        
        select {
            padding: 12px 15px;
            border: 1px solid var(--primary-light);
            border-radius: 10px;
            background-color: var(--white);
            font-size: 1rem;
            transition: all 0.3s;
            appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 15px center;
            background-size: 16px;
        }
        
        select:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(106, 177, 247, 0.15);
        }
        
        .filter-button {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: var(--white);
            border: none;
            border-radius: 10px;
            padding: 12px 20px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-top: 28px;
        }
        
        .filter-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(106, 177, 247, 0.4);
        }
        
        /* 卡片容器样式 */
        .cards-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 25px;
            margin-bottom: 50px;
        }
        
        .card {
            background-color: var(--white);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: var(--card-shadow);
            transition: all 0.3s;
            position: relative;
            border: 1px solid rgba(168, 208, 254, 0.5);
        }
        
        .card:hover {
            transform: translateY(-8px);
            box-shadow: var(--hover-shadow);
        }
        
        .card-header {
            padding: 20px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #f0f0f0;
            gap: 15px;
        }
        
        .avatar {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid var(--primary-light);
        }
        
        .user-info {
            flex: 1;
        }
        
        .user-name {
            font-weight: 600;
            font-size: 1.2rem;
            margin-bottom: 5px;
        }
        
        .user-role {
            display: inline-block;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
        }
        
        .role-student {
            background-color: rgba(142, 197, 252, 0.3);
            color: #2c6fb0;
        }
        
        .role-teacher {
            background-color: rgba(106, 177, 247, 0.3);
            color: var(--secondary);
        }
        
        .card-body {
            padding: 20px;
        }
        
        .card-field {
            margin-bottom: 12px;
            display: flex;
            align-items: center;
        }
        
        .field-icon {
            width: 24px;
            text-align: center;
            color: var(--primary);
            margin-right: 10px;
        }
        
        .field-value {
            flex: 1;
        }
        
        .gender-male {
            color: #4a8bc9;
        }
        
        .gender-female {
            color: #e87a9a;
        }
        
        .description {
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid #f0f0f0;
            color: var(--text-light);
            font-size: 0.95rem;
            line-height: 1.5;
        }
        
        /* 页脚样式 */
        footer {
            background-color: var(--white);
            padding: 40px 0;
            margin-top: 40px;
            border-top: 1px solid var(--primary-light);
        }
        
        .footer-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .footer-logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 700;
            color: var(--primary);
            font-size: 1.2rem;
        }
        
        .footer-links {
            display: flex;
            gap: 20px;
        }
        
        .footer-link {
            color: var(--text-light);
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .footer-link:hover {
            color: var(--primary);
        }
        
        .copyright {
            text-align: center;
            margin-top: 30px;
            color: var(--text-light);
            font-size: 0.9rem;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .filter-form {
                grid-template-columns: 1fr;
            }
            
            .cards-container {
                grid-template-columns: 1fr;
            }
            
            .hero-section {
                padding: 40px 0 30px;
            }
            
            h1 {
                font-size: 2.2rem;
            }
            
            .footer-content {
                flex-direction: column;
                gap: 20px;
                text-align: center;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <header>
        <div class="container">
            <div class="navbar">
                <div class="logo">
                    <i class="fas fa-graduation-cap logo-icon"></i>
                    <span class="logo-text">青南学长</span>
                </div>
                
                <div class="user-menu">
                    <img src="./temeplates/images/avatar/3.png" alt="用户头像" class="user-avatar" id="user-avatar">
                    <div class="dropdown-menu" id="dropdown-menu">
                        <!-- 登录状态下的菜单 -->
                        <div id="logged-in-menu">
                            <a href="usercenter.html" class="dropdown-item">
                                <i class="fas fa-user-circle"></i>
                                <span>用户中心</span>
                            </a>
                            <!--<a href="#" class="dropdown-item">
                                <i class="fas fa-heart"></i>
                                <span>我的收藏</span>
                            </a>
                            <a href="#" class="dropdown-item">
                                <i class="fas fa-cog"></i>
                                <span>账户设置</span>
                            </a>-->
                            <div class="dropdown-divider"></div>
                            <a href="login.html" class="dropdown-item">
                                <i class="fas fa-sign-out-alt"></i>
                                <span>退出登录</span>
                            </a>
                        </div>
                        
                        <!-- 未登录状态下的菜单 -->
                        <div id="logged-out-menu" style="display: none;">
                            <a href="#" class="dropdown-item">
                                <i class="fas fa-sign-in-alt"></i>
                                <span>登录</span>
                            </a>
                            <a href="#" class="dropdown-item">
                                <i class="fas fa-user-plus"></i>
                                <span>注册</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="container">
        <!-- 页面标题区域 -->
        <section class="hero-section">
            <h1>找到最适合您的学习伙伴</h1>
            <p class="subtitle">青南学长平台连接优秀教师与有需求的学生，提供个性化、高质量的家教服务</p>
        </section>
        
        <!-- 筛选栏 -->
        <section class="filter-section">
            <h2 class="filter-title">
                <i class="fas fa-filter"></i>
                筛选条件
            </h2>
            <div class="filter-form">
                <div class="filter-group">
                    <label for="role">身份类型</label>
                    <select id="role">
                        <option value="all">全部</option>
                        <option value="teacher">教师</option>
                        <option value="student">学生</option>
                    </select>
                </div>
                
                <div class="filter-group">
                    <label for="grade">年级</label>
                    <select id="grade">
                        <option value="all">全部</option>
                        <option value="小学">小学</option>
                        <option value="初中">初中</option>
                        <option value="高中">高中</option>
                        <option value="大学">大学</option>
                    </select>
                </div>
                
                <div class="filter-group">
                    <label for="subject">科目</label>
                    <select id="subject">
                        <option value="all">全部</option>
                        <option value="数学">数学</option>
                        <option value="英语">英语</option>
                        <option value="语文">语文</option>
                        <option value="物理">物理</option>
                        <option value="化学">化学</option>
                    </select>
                </div>
                
                <div class="filter-group">
                    <label for="region">地区</label>
                    <select id="region">
                        <option value="all">全部</option>
                        <option value="北京">北京</option>
                        <option value="上海">上海</option>
                        <option value="广州">广州</option>
                        <option value="深圳">深圳</option>
                        <option value="杭州">杭州</option>
                    </select>
                </div>
                
                <button type="button" class="filter-button" id="filter-btn">
                    <i class="fas fa-search"></i>
                    筛选
                </button>
            </div>
        </section>
        
        <!-- 卡片展示区域 -->
        <section class="cards-container" id="cards-container">
            <!-- 卡片将通过JavaScript动态生成 -->
        </section>
    </main>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-logo">
                    <i class="fas fa-graduation-cap"></i>
                    <span>青南学长平台</span>
                </div>
                
                <div class="footer-links">
                    <a href="about.html" class="footer-link">关于我们</a>
                    <a href="about.html" class="footer-link">联系我们</a>
                    <a href="provisions.html" class="footer-link">隐私政策</a>
                    <a href="provisions.html" class="footer-link">使用条款</a>
                </div>
            </div>
            
            <div class="copyright">
                © 2023 青南学长平台 - 为学习和教育搭建桥梁
            </div>
        </div>
    </footer>

    <script>
        // 模拟数据 - 在实际应用中，这些数据应该从后端API获取
        const usersData = [
            {
                id: 1,
                name: "张老师",
                role: "teacher",
                avatar: "./temeplates/images/avatar/3.png" || "https://randomuser.me/api/portraits/men/32.jpg",
                grade: "高中",
                subject: "数学",
                region: "北京",
                gender: "male",
                description: "拥有10年教学经验，擅长高中数学教学，曾培养多名学生考入重点大学。注重培养学生的逻辑思维能力和解题技巧。"
            },
            {
                id: 2,
                name: "李老师",
                role: "teacher",
                avatar: "./temeplates/images/avatar/2.png" || "https://randomuser.me/api/portraits/women/44.jpg",
                grade: "初中",
                subject: "英语",
                region: "上海",
                gender: "female",
                description: "英语专业八级，发音标准，注重口语训练，帮助学生提高英语综合能力。教学方法灵活多样，深受学生喜爱。"
            },
            {
                id: 3,
                name: "王老师",
                role: "teacher",
                avatar: "./temeplates/images/avatar/3.png" || "https://randomuser.me/api/portraits/men/22.jpg",
                grade: "小学",
                subject: "语文",
                region: "广州",
                gender: "male",
                description: "耐心细致，善于激发学生学习兴趣，注重培养阅读和写作能力。课堂氛围活跃，善于与学生互动。"
            },
            {
                id: 4,
                name: "刘同学",
                role: "student",
                avatar: "./temeplates/images/avatar/4.png" || "https://randomuser.me/api/portraits/women/63.jpg",
                grade: "高中",
                subject: "物理",
                region: "深圳",
                gender: "female",
                description: "高二学生，物理基础较弱，希望找到有经验的物理老师帮助提高成绩。学习态度认真，愿意配合老师教学安排。"
            },
            {
                id: 5,
                name: "陈老师",
                role: "teacher",
                avatar: "./temeplates/images/avatar/3.png" || "https://randomuser.me/api/portraits/men/41.jpg",
                grade: "高中",
                subject: "化学",
                region: "北京",
                gender: "male",
                description: "化学博士，教学经验丰富，善于将复杂知识简单化，帮助学生理解化学原理。注重实验教学，提高学生实践能力。"
            },
            {
                id: 6,
                name: "赵老师",
                role: "teacher",
                avatar: "./temeplates/images/avatar/2.png" || "https://randomuser.me/api/portraits/women/33.jpg",
                grade: "初中",
                subject: "数学",
                region: "上海",
                gender: "female",
                description: "教学风格严谨，注重培养学生的逻辑思维能力，帮助学生建立数学思维模式。善于总结解题方法和技巧。"
            },
            {
                id: 7,
                name: "孙同学",
                role: "student",
                avatar: "./temeplates/images/avatar/1.png" || "https://randomuser.me/api/portraits/men/65.jpg",
                grade: "初中",
                subject: "英语",
                region: "杭州",
                gender: "male",
                description: "初一学生，英语基础薄弱，特别是语法和词汇方面，希望找到有耐心的老师。愿意努力提升英语水平。"
            },
            {
                id: 8,
                name: "周老师",
                role: "teacher",
                avatar: "./temeplates/images/avatar/2.png" || "https://randomuser.me/api/portraits/women/28.jpg",
                grade: "小学",
                subject: "数学",
                region: "深圳",
                gender: "female",
                description: "擅长小学数学教学，注重培养学生的数学兴趣和逻辑思维能力，教学成果显著。善于使用游戏化教学方式。"
            },
            {
                id: 9,
                name: "吴老师",
                role: "teacher",
                avatar: "./temeplates/images/avatar/3.png" || "https://randomuser.me/api/portraits/men/56.jpg",
                grade: "高中",
                subject: "物理",
                region: "广州",
                gender: "male",
                description: "物理竞赛教练，曾指导多名学生获得省级物理竞赛奖项，教学经验丰富。注重培养学生的物理思维和解题能力。"
            }
        ];

        // 模拟登录状态 - 在实际应用中，这个状态应该从后端获取
        let isLoggedIn = true;

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 默认显示所有用户
            displayUsers(usersData);
            
            // 添加筛选按钮事件监听
            document.getElementById('filter-btn').addEventListener('click', filterUsers);
            
            // 设置用户菜单状态
            setupUserMenu();
            
            // 添加用户头像点击事件
            document.getElementById('user-avatar').addEventListener('click', toggleUserMenu);
            
            // 点击页面其他区域关闭下拉菜单
            document.addEventListener('click', function(e) {
                if (!e.target.closest('.user-menu')) {
                    document.getElementById('dropdown-menu').classList.remove('active');
                }
            });
        });

        // 设置用户菜单状态
        function setupUserMenu() {
            const loggedInMenu = document.getElementById('logged-in-menu');
            const loggedOutMenu = document.getElementById('logged-out-menu');
            
            if (isLoggedIn) {
                loggedInMenu.style.display = 'block';
                loggedOutMenu.style.display = 'none';
            } else {
                loggedInMenu.style.display = 'none';
                loggedOutMenu.style.display = 'block';
            }
        }

        // 切换用户菜单显示/隐藏
        function toggleUserMenu() {
            document.getElementById('dropdown-menu').classList.toggle('active');
        }

        // 显示用户卡片
        function displayUsers(users) {
            const container = document.getElementById('cards-container');
            container.innerHTML = '';
            
            if (users.length === 0) {
                container.innerHTML = `
                    <div style="text-align: center; width: 100%; padding: 50px 20px; grid-column: 1 / -1;">
                        <i class="fas fa-search" style="font-size: 60px; color: #ccc; margin-bottom: 20px;"></i>
                        <h3 style="color: var(--text-light); margin-bottom: 10px;">没有找到匹配的用户</h3>
                        <p style="color: var(--text-light);">请尝试调整筛选条件</p>
                    </div>
                `;
                return;
            }
            
            users.forEach(user => {
                const card = document.createElement('div');
                card.className = 'card';
                
                const roleClass = user.role === 'teacher' ? 'role-teacher' : 'role-student';
                const roleText = user.role === 'teacher' ? '教师' : '学生';
                const genderClass = user.gender === 'male' ? 'gender-male' : 'gender-female';
                const genderIcon = user.gender === 'male' ? 'fas fa-mars' : 'fas fa-venus';
                const genderText = user.gender === 'male' ? '男' : '女';
                
                card.innerHTML = `
                    <div class="card-header">
                        <img src="${user.avatar}" alt="${user.name}" class="avatar">
                        <div class="user-info">
                            <div class="user-name">${user.name}</div>
                            <span class="user-role ${roleClass}">${roleText}</span>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="card-field">
                            <div class="field-icon">
                                <i class="fas fa-graduation-cap"></i>
                            </div>
                            <div class="field-value">${user.grade}</div>
                        </div>
                        <div class="card-field">
                            <div class="field-icon">
                                <i class="fas fa-book"></i>
                            </div>
                            <div class="field-value">${user.subject}</div>
                        </div>
                        <div class="card-field">
                            <div class="field-icon">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            <div class="field-value">${user.region}</div>
                        </div>
                        <div class="card-field">
                            <div class="field-icon">
                                <i class="${genderIcon} ${genderClass}"></i>
                            </div>
                            <div class="field-value ${genderClass}">${genderText}</div>
                        </div>
                        <div class="description">
                            ${user.description}
                        </div>
                    </div>
                `;
                
                container.appendChild(card);
            });
        }

        // 筛选用户
        function filterUsers() {
            const roleFilter = document.getElementById('role').value;
            const gradeFilter = document.getElementById('grade').value;
            const subjectFilter = document.getElementById('subject').value;
            const regionFilter = document.getElementById('region').value;
            
            const filteredUsers = usersData.filter(user => {
                // 身份筛选
                if (roleFilter !== 'all' && user.role !== roleFilter) {
                    return false;
                }
                
                // 年级筛选
                if (gradeFilter !== 'all' && user.grade !== gradeFilter) {
                    return false;
                }
                
                // 科目筛选
                if (subjectFilter !== 'all' && user.subject !== subjectFilter) {
                    return false;
                }
                
                // 地区筛选
                if (regionFilter !== 'all' && user.region !== regionFilter) {
                    return false;
                }
                
                return true;
            });
            
            displayUsers(filteredUsers);
        }
    </script>
</body>
</html>